<template>
  <div class="layout">
    <layout>
      <Header>Header1</Header>
      <Content>Content1</Content>
      <Footer>Footer1</Footer>
    </layout>

    <Layout>
      <Header>Header</Header>
      <Layout>
        <Sider hide-trigger>Sider</Sider>
        <Content>Content</Content>
      </Layout>
      <Footer>Footer</Footer>
    </Layout>

    <Layout>
      <Header>Header</Header>
      <Layout>
        <Content>Content</Content>
        <Sider hide-trigger>Sider</Sider>
      </Layout>
      <Footer>Footer</Footer>
    </Layout>

    <Layout>
      <Sider hide-trigger>Sider</Sider>
      <Layout>
        <Header>Header</Header>
        <Content>Content</Content>
        <Footer>Footer</Footer>
      </Layout>
    </Layout>
  </div>
</template>
<script>
  export default {
    components:{},
    data(){
      return{

      }
    }
  }
</script>
